<template>
  <el-card class="list-container">
    <div class="form">
      <el-form label-width="100px" class="demo-dynamic" :inline="true">
        <el-form-item label="树IP" :rules="[{ type: 'email', message: '请输入树ID', trigger: 'change' }]">
          <el-select v-model="value" clearable multiple collapse-tags placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="运行状态" :rules="[{ type: 'email', message: '请输入树ID', trigger: 'change' }]">
          <el-select v-model="value1" clearable multiple collapse-tags placeholder="请选择">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btnsty">
      <div>
        <!-- 后续版本废弃 -->
        <!-- <el-button type="primary" @click="AddDevice">手动新建树</el-button> -->
        <el-button type="primary" @click="createDevice">自动新建树</el-button>
        <el-button type="primary" @click="addSoft">自动安装软件</el-button>
        <el-button type="primary" @click="autoSearch">自动搜索</el-button>
        <el-button type="primary" @click="cleanContainer">一键清除树</el-button>
      </div>
      <div>
        <el-button type="primary" @click="handelOpenBook">打码图鉴</el-button>
        <el-button type="primary" @click="handelIceExtend">冰拓</el-button>
        <el-button type="primary" @click="handelIce">邮箱api</el-button>
        <el-button type="primary" @click="handelFeedNumber">培育配置</el-button>
        <el-button type="primary" @click="handleVpn">vpn配置</el-button>
      </div>
    </div>

    <el-divider />

    <div>
      <div class="wrap-flex">
        <span style="marginRight:10px">已择{{ multipleSelection.length }}条</span>
        <el-button :disabled="!multipleSelection.length" type="danger" icon="el-icon-search"
          @click="handeBtn('remove')">批量删除</el-button>
        <el-button type="primary" :disabled="!multipleSelection.length" @click="handeBtn('stop')">批量关闭</el-button>
        <el-button type="primary" :disabled="!multipleSelection.length" @click="handeBtn('restart')">批量重启</el-button>
        <el-button type="primary" :disabled="!multipleSelection.length" @click="handeBtn('restart')">
          批量启动</el-button>
      </div>

      <!-- table -->
      <el-table 
        :row-class-name="tableRowClassName" 
        v-loading="loading" :data="tableData" 
        border 
        :row-key="row => row._id"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="index" label="窗口索引" :showOverflowTooltip="true" />
        <el-table-column prop="deviceId" label="树id" width="200" :showOverflowTooltip="true" />
        <el-table-column prop="containerIp" label="树ip" width="120" :showOverflowTooltip="true" />
        <el-table-column prop="containerPort" label="端口" :showOverflowTooltip="true" />
        <el-table-column prop="containerNameSelf" label="容器名称" :showOverflowTooltip="true" />
        <el-table-column prop="brand" label="品牌" :showOverflowTooltip="true" />
        <el-table-column prop="model" label="型号" :showOverflowTooltip="true" />
        <el-table-column prop="statusStr" label="状态" />
        <el-table-column prop="runStatus" label="运行状态" width="120" />
        <el-table-column prop="genTimeStr" label="创建时间" width="180" :showOverflowTooltip="true" />
        <el-table-column prop="imageAddr" label="镜像地址" width="180" :showOverflowTooltip="true" />
        <!-- <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleRegistere(scope.row)">种树</el-link> |
            <el-link type="primary" @click="handleNumber(scope.row)">培育</el-link> |
            <el-link type="warning" @click="handleAttention(scope.row)">施肥</el-link>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagination">
        <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
          layout="sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 打码图鉴 -->
    <HandelBook ref="dookRef" />
    <!-- 种树 -->
    <!-- <Register ref="registerRef" :container-ip="containerIp" /> -->
    <!-- 冰拓 -->
    <IceExtend ref="iceExtendRef" />
    <!-- 培育配置 -->
    <FeedNumber ref="feedNumberRef" />
    <!-- 新建树 -->
    <DialogAddDeviceForm ref="dialogAddDeviceForm" />
    <!-- 邮箱api -->
    <DialoEmailForm ref="DialoEmail" />
    <!-- 施肥 -->
    <!-- <AttentionForm ref="AttentionForm" :device-id="curId" /> -->
    <!-- 自动创建树 -->
    <CreateDeacilec ref="createDeacilec" />
    <!-- vpn配置 -->
    <VpnSetting ref="VpnSetting" />
  </el-card>
</template>

<script>
import moment from "moment";
import FeedNumber from './component/feedNumber.vue'
// import Register from './component/resister.vue'
import DialoEmailForm from './component/dialoEmailForm.vue'
import HandelBook from './component/handelBook.vue'
import IceExtend from './component/iceExtend.vue'
import DialogAddDeviceForm from './component/dialogAddDeviceForm'
// import AttentionForm from './component/attentionForm.vue' 
import CreateDeacilec from './component/createDeacilec.vue'
import VpnSetting from './component/VpnSetting.vue'
import { handelFeed } from '../../request/facilityList'
export default {
  components: {
    DialogAddDeviceForm,
    HandelBook,
    IceExtend,
    FeedNumber,
    DialoEmailForm,
    // Register,
    CreateDeacilec,
    VpnSetting,
    // AttentionForm
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      isEdit: true,
      list: [],
      multipleSelection: [],
      containerIp: '',
      options: [],
      options1: [
        {
          label: '已创建',
          value: 'created',
        },
        {
          label: '运行中',
          value: 'running',
        },
        {
          label: '已停止',
          value: 'stop',
        },
        {
          label: '已退出',
          value: 'exited',
        }
      ],
      value: [],
      value1: ['running'],
      tableData: [],
      currentId: null,
      curId: '',
      loading: false
    }
  },
  created() {
    // 下拉框
    this.selectList()
    // 表格
    this.iniTable()
  },
  methods: {
    EditForm(istrue) {
      istrue && this.iniTable()
    },
    iniTable() {
      this.loading = true
      // 发送数据请求
      this.$http.post(`/api/cloud_device/list`, {
        ips: [...this.value],
        status: this.value1,
        page: this.currentPage,
        limit: this.pageSize
      }).then(res => {
        if (res.success) {
          this.tableData = res.data.list.map(v => {
            return { ...v, containerGenTime: moment(v.containerGenTime).format('YYYY-MM-DD HH:mm:ss') }
          })
          this.total = res.data.total
          this.loading = false
        } else {
          this.$error(res.msg)
          this.loading = false
        }
      }).catch(err => {
        this.loading = false
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return '';
      } else {
        // return 'success-row';
      }
    },
    selectList() {
      this.$http.get('/api/cloud_device/list').then(res => {
        if (res.success) {
          this.options = res.data.map(ele => {
            return {
              value: ele.ip,
              label: ele.ip
            }
          })
        }
      })
    },
    // 新建树
    AddDevice() {
      this.$refs.dialogAddDeviceForm.open()
    },
    // 自动创建树
    createDevice() {
      this.$refs.createDeacilec.open()
    },
    // 自动安装软件
    addSoft() {
      this.$confirm('确认自动安装软件吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get(`/api/cloud_device/auto_install`)
          .then(res => {
            if (res.success) {
              this.$success('创建成功')
              this.iniTable()
            } else {
              this.$error(res.msg)
            }
          })
      }).catch(() => {
        this.$error('取消创建')
      });
    },
    // 自动搜索
    autoSearch() {
      this.$confirm('确认自动搜索吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('/api/cloud_device/auto_search')
          .then(res => {
            if (res.success) {
              this.$success('后台搜索中')
              this.iniTable()
            } else {
              this.$error(res.msg)
            }
          })
      }).catch(() => {
        this.$error('取消搜索')
      });
    },
    //一键清除
    cleanContainer(){
      this.$confirm('确认一键清除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(`/api/cloud_device/delete`,{
        ips: [...this.value]
      })
          .then(res => {
            if (res.success) {
              this.$success('后台清除中')
              this.iniTable()
            } else {
              this.$error(res.msg)
            }
          })
      }).catch(() => {
        this.$error('取消一键清除')
      })
    },
    // 培育配置按钮
    RaiseNumber() {
      this.$refs.DialogRaiseNumberForm.open()
    },
    // api邮箱
    handelIce() {
      this.$refs.DialoEmail.open()
    },
    closeDig() {
      // 刷新表格
      this.$success('刷新表格数据')
    },
    // VPN配置
    handleVpn() {
      this.$refs.VpnSetting.open()
    },
    // 种树
    handleRegistere(row) {
      console.log(row)
      this.containerIp = row.containerIp
      this.$refs.registerRef.handelOpen()
    },
    // 培育
    async handleNumber(row) {
      const res = await handelFeed(row.containerIp)
      if (res.success) {
        this.$success('操作成功')
      }
    },
    // 施肥
    handleAttention(row) {
      // this.curId = row.containerIp
      this.$refs.AttentionForm.open()
    },
    // 搜索
    submitForm() {
      this.iniTable()
    },
    resetForm() {
      this.value = ''
      this.value1 = ['running']
      this.iniTable()
    },
    // 打码图鉴
    handelOpenBook() {
      this.$refs.dookRef.handelOpen()
    },
    // 冰拓
    handelIceExtend() {
      this.$refs.iceExtendRef.handelOpen()
    },
    // 培育配置
    handelFeedNumber() {
      this.$refs.feedNumberRef.handelOpen()
    },
    // 批量
    handeBtn(command) {
      // 发送数据请求
      const multipleSelection = this.multipleSelection.map(v => {
        return { ...v, command }
      })
      this.$confirm('确认执行该命令吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http
        .post(`/api/cloud_device/command`, multipleSelection)
        .then(res => {
          if (res.success) {
            this.$success('操作成功')
            this.iniTable()
          } else {
            this.$error(res.msg)
          }
        })
      }).catch(() => {
        this.$error('取消执行')
      })
      
    },
    handleSelectionChange(val) {
      console.log('val', val)
      if (val && val.length) {
        this.multipleSelection = val.map(v => {
          return {
            ip: v.ip,
            containerIp: v.containerIp,
            deviceId: v.deviceId,
            containerId: v.containerId,
            index: v.index,
            containerPort: v.containerPort
          }
        })
        return
      }
      this.multipleSelection = []
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.iniTable()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.iniTable()
    }
  }
}
</script>

<style scoped lang="less">
.pagination {
  text-align: center;
  padding: 20px 0 0;
}

.wrap-flex {
  display: flex;
  align-items: center;
}

.groundForm {
  display: flex;
}

.el-tooltip__content {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/deep/.el-table .warning-row {
  background: oldlace !important;
}

/deep/.el-table .success-row {
  background: #f0f9eb !important;
}

.btnsty {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.form {
  display: flex;
  width: 100%;
}
</style>
